<template>
  <div class="container">
    <Header :showRefresh="false" />
    <div class="page-main">
      <div class="page-main-query">
        <FilterBar>
          <template #left>
            <el-input
              class="input"
              placeholder="搜索角色名称"
              v-model="name"
              @input="handleSearch"
            />
            <el-button type="primary" @click="reset">重置</el-button>
          </template>
          <template #right>
            <el-button
              type="primary"
              size="small"
              class="custom-purple"
              @click="() => openRoleEdit()"
            >
              新增角色
            </el-button>
          </template>
        </FilterBar>
      </div>
      <div class="table-area">
        <vxe-grid
          height="100%"
          v-loading="loading"
          ref="xGrid"
          :columns="columns"
          :data="data"
          border
          size="mini"
        >
          <template #actions="{ row }">
            <el-button type="text" @click="openRoleEdit(row, true)">
              编辑
            </el-button>
            <el-button type="text" @click="handleDelete(row)"> 删除 </el-button>
          </template>

          <template #pager>
            <el-pagination
              :background="true"
              @size-change="sizeChange"
              @current-change="getList"
              v-model:currentPage="current"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="size"
              layout="sizes, prev, pager, next"
              :total="total"
            />
          </template>
        </vxe-grid>
      </div>
    </div>
    <role-edit-dialog ref="dialogRef" @update-list="getList" />
  </div>
</template>

<script>
import { ref, onMounted, reactive, toRefs } from "vue";
import { getRoles, deleteRoles } from "@/api/system";
import RoleEditDialog from "./components/RoleEditDialog.vue";
import Header from "@/components/Header.vue";
import { Search } from "@element-plus/icons-vue";
import FilterBar from "@/components/FilterBar.vue";
import { ElMessageBox } from 'element-plus'
export default {
  name: "Roles",
  components: {
    RoleEditDialog,
    Header,
    FilterBar,
  },
  setup() {
    const query = reactive({
      name: "",
      current: 1,
      size: 20,
    });
    const loading = ref(false);
    const dialogRef = ref(null);
    const total = ref(0);
    const columns = ref([
      { field: "name", title: "角色名称", treeNode: true },
      // { field: 'status', title: '状态' },
      { field: "description", title: "描述" },
      { width: 100, title: "操作", slots: { default: "actions" } },
    ]);
    const data = ref([]);
    // 重置
    const reset = () => {
      query.name = ''; // 先重置页码
      handleSearch()
    }
    // 点击查询
    const handleSearch = () => {
      query.current = 1; // 先重置页码
      getList(1,query.size);
    };
    const sizeChange = (val) => {
      query.size = val;
      query.current = 1;
      getList();
    }
    const getList = async () => {

      loading.value = true;
      const res = await getRoles(query);
      data.value = res.data.list;
      total.value = res.data.total;
      loading.value = false;
    };

    const openRoleEdit = (row, flag) => {
      dialogRef.value.open(row, flag);
    };

    // 删除菜单
    const handleDelete = async (row) => {
      ElMessageBox.confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteRoles(row.id);
        getList();
      });
    };

    onMounted(() => {
      getList();
    });

    return {
      Search,
      ...toRefs(query),
      query,
      columns,
      data,
      total,
      getList,
      openRoleEdit,
      handleDelete,
      dialogRef,
      loading,
      handleSearch,
      sizeChange,
      reset
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../globle.scss";
.page-main {
  padding-bottom: 0;
}
.page-main-query {
  margin-bottom: 20px;
}
.table-area {
  height: calc(100vh - 210px);
}
</style>